import React from 'react'
import { generateGradientBackgroundByString } from '@/utils/ui'
import { open } from '@tauri-apps/api/shell'

export type AppItemData = {
  icon: React.ReactNode
  title: string
  desc: string
  link?: string
  onClick?: () => void
}

interface AppItemProps {
  appItem: AppItemData
}

const AppItem: React.FC<AppItemProps> = React.memo((props) => {
  const { appItem } = props

  const handleClick = () => {
    if (appItem.onClick) {
      appItem.onClick()
      return
    }
    open(appItem.link!)
  }

  return (
    <div
      className='flex items-stretch p-3 space-x-3 border border-border rounded-lg cursor-pointer hover:bg-muted transition-colors duration-300 ease-out select-none'
      onClick={handleClick}
    >
      <div
        className='flex justify-center items-center text-background size-12 flex-none rounded-md'
        style={{
          background: generateGradientBackgroundByString(`${appItem.title}..`),
        }}
      >
        {appItem.icon}
      </div>
      <div className='flex flex-col justify-between my-0.5'>
        <h2 className='text-foreground text-base leading-none'>
          {appItem.title}
        </h2>
        <span className='text-muted-foreground text-sm leading-none line-clamp-1 text-ellipsis'>
          {appItem.desc}
        </span>
      </div>
    </div>
  )
})

export default AppItem
